<!-- 报名项目 -->
<template>
	<Layout>
    <fa-navbar title="报名人信息" :border-bottom="false"></fa-navbar>
    
    <view class="form">
      <view v-for="(item, index) in formDataList" :key="item.id" class="item">
        <view class="lab"><text class="color-red" v-if="item.is_required == 1">*</text>{{item.field_label}} <text class="color-red tip" v-if="item.field_remark">（{{item.field_remark}}）</text></view>
        <view class="div flex-lect" >
          <input v-if="item.field_type == 'input'" type="text" :placeholder="'请填写'+item.field_label" v-model="item.val" class="text" />
          <input v-else-if="item.field_type == 'number'" type="number" :placeholder="'请填写'+item.field_label" v-model="item.val" class="text" />
          <picker v-else-if="item.field_type == 'select'" class="picker flex-1" range-key="name" :value="item.val" :range="item.field_options" @change="changePicker($event, index)">
            <view class="picker-bg flex-lect f28">
              <text class="color-999 " v-if="item.val === ''">请选择{{item.field_label}}</text>
              <template v-else>{{item.val}}</template>
            </view>
          </picker>
          
          <picker v-else-if="item.field_type == 'date'" class="picker flex-1" mode="date" :value="item.val"  @change="changePicker($event, index)">
            <view class="picker-bg flex-lect f28">
              <text class="color-999 " v-if="item.val === ''">请选择{{item.field_label}}</text>
              <template v-else>{{item.val}}</template>
            </view>
          </picker>
          <template v-else-if="item.field_type == 'radio'">
            <view v-for="(radioItem, radioIdx) in item.field_options" :key="radioIdx" :class="{on:item.val == radioItem.id}" class="radio-item flex-lect mr20" @click="changeRadio(radioItem, index)">
              
              <view class="radio flex-ct"><u-icon v-if="item.val == radioItem.id" name="checkmark" color="#fff" size="20"></u-icon></view>
              <view class="f28">{{radioItem.name}}</view>
            </view>
          </template>
          
          <u-icon v-if="item.field_type == 'date' || item.field_type == 'select'" name="arrow-right" color="#999"></u-icon>
        </view>
      </view>
      
      <view class="form-tip2 color-red">备注: 重复报名的情况, 以官网报名为准, 请勿在多个平台上重复报名!</view>
    </view>
    
    <!-- 免责声明弹窗 -->
    <u-popup v-model="pupshow" mode="center" border-radius="20" :closeable="true">
      <view class="pup-box">
        <view class="title tc f32 color-000">参赛选手免责声明</view>
        <scroll-view scroll-y="true" style="max-height: calc( 100vh - 300rpx);">
          <view class="f26 color-333"><u-parse :html="content"></u-parse></view>
        </scroll-view>
        <zb-bottom :is-fixed="false" :h="120">
          <view class="submit-btn bg-primay flex-ct"  :class="{no: !pupBtn}" @click="pupshow = false">请阅读全文并确认</view>
        </zb-bottom>
      </view>
    </u-popup>
    <!-- 底部操作区域 -->
    <zb-bottom :h="240">
      <view style="padding: 30rpx 30rpx;">
        <u-checkbox-group>
        	<view class="flex-lect">
            <u-checkbox v-model="checked" shape="circle" active-color="#05B196">我已阅读并同意</u-checkbox>
            <text class="color-primary f28 flex-ct" @click="pupshow = true">参赛选手免责声明</text>
          </view>
        </u-checkbox-group>
      </view>
      <view class="submit-btn bg-primay flex-ct" @click="submit" :class="{no:!btnCan}">确定</view>
    </zb-bottom>
  </Layout>
</template>

<script>
	export default {
		data() {
			return {
        formData:{
          name:'',
          gender:1,
          card:'',
          mobile:'',
          birthday:'',
          city:'',
          address:'',
          blood:'', // 血型
          size:'', // 服装尺寸
          link_name:'', // 紧急联系人
          link_mobile:'', // 紧急联系人电话
          age:'', // 年龄
        },
        checked:false,
        genderList:[ {name:'男', id:1}, {name:'女', id:2}],
        guojiList:[{name:'中国', id:1}, {name:'美国', id:2}, {name:'塞尔维亚', id:3}],
        guojiIdx:'',
        
        bloodTypes:[ {name:'A型', id:1}, {name:'B型', id:2}], // 血型
        bloodIdx:'',
        sizeList:[ {name:'xs', id:1}, {name:'s', id:2}], // 血型
        sizeIdx:'',
        
        // btnCan:false,
        pupshow:false, // 免责声明
        content:"",
        pupBtn:false,
        activity_id:'', // 当前赛事的id
        formDataList:[],
			}
		},
    onLoad(e){
      this.activity_id = e.id;
      // 报名的字段
      this.$api.getActivityFieldsApi({id: this.activity_id}).then(res1=>{
        
        if(e.register_id){
          this.$api.activityRegisterInfoApi({register_id: e.register_id}).then(res=>{
            if(res.data && res.data.fields && res.data.fields.length > 0){
              this.formDataList = res1.data.map(m=> { 
                const item = res.data.fields.find(n => m.field_name === n.field_id)
                return {
                  ...m, 
                  val:item? item.field_value : '',
                }
              });
            }else{
              this.formDataList = res1.data.map(m=> { return {...m, val:''}});
            }
          })
        }else{
          this.formDataList = res1.data.map(m=> { return {...m, val:''}});
        }
        console.log('this.formDataList---------', this.formDataList)
      })
      
      // 免责申明
      this.getDisclaimers()
    },
    computed:{
      btnCan(){
        let a = false;
        for(let i = 0; i < this.formDataList.length; i++){
          const item = this.formDataList[i]
          if(!item.val && item.is_required == 1){
            a = false
            break;
          }else{
            a = true;
          }
        }
        return a && this.checked
      },
    },
		methods: {
      changeRadio(item, index){
        console.log('1111', item, index)
        this.formDataList[index].val = item.id
      },
      // 免责申明
      getDisclaimers(){
        this.$api.disclaimersApi({}).then(res=>{
          this.content = res.data;
        })
      },
      // 获取地址
      changePicker(e, index){
        const item = this.formDataList[index];
        if(item.field_type === 'date'){
          this.formDataList[index].val = e.detail.value
        }else if(item.field_type === 'select'){
          this.formDataList[index].val = item.field_options[e.detail.value].id
        }else{
          this.formDataList[index].val = e.detail.value
        }
        
      },
      submit(){
        let data = {
          activity_id: this.activity_id
        };
        let tips = ''
        this.formDataList.forEach(m => {
          data[m.field_name] = m.val;
          if(m.is_required == 1 && !m.val && !tips){
            tips = m.field_label+'不能为空~'
          }
        })
        if(tips) return uni.showToast({title: tips, icon:'none'})
        if(!this.checked) return uni.showToast({title: '请先阅读和同意参赛选手免责声明', icon:'none'})
        if(!this.btnCan) return;
        this.$api.activitySignUpApi(data).then(res=>{
          if(res.code == 1){
            uni.navigateTo({
              url:'/home/match/confirmBaom?id='+res.data.user_info.id
            })
          }else{
            uni.showToast({title:res.msg, icon:'none'})
          }
        })
      },
			
		},
    onPageScroll(e) {
      getApp().setNavFixed(this,e)
    },
    onReachBottom() {
      
    }
	}
</script>

<style lang="scss" scoped>
.form{
  font-size: 24rpx; background-color: #FAFAFA;
  .tip{font-size: 22rpx;}
  .lab{padding: 30rpx 30rpx 20rpx;}
  .div{
    background-color: #fff; min-height: 88rpx; padding: 0 30rpx; position: relative;
    .picker{width: 100%; height: 88rpx;}
    .picker-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 30rpx;}
  }
  .text{height: 88rpx; font-size: 28rpx; width: 100%;}
}
.submit-btn{width: 100%; height: 88rpx; border-radius: 60rpx;}
.form-tip2{padding: 20rpx 30rpx;}
.pup-box{
  .title{margin-bottom: 20rpx;}
}
.radio{width: 32rpx; height: 32rpx; border-radius: 50%; border: 2rpx solid #AAAAAA; margin-right: 14rpx;}
.on{
  .radio{background-color: #05B196; border-color: #05B196;}
}
</style>
